<template>
  <div class="AllAttractions">
    <!-- 位置距离 -->
    <div class="position">
      <p>
        位置距离
        <span class="iconfont icon-xiajiantou"></span>
      </p>
      <p>
        全部分类
        <span class="iconfont icon-xiajiantou"></span>
      </p>
      <p>
        综合排序
        <span class="iconfont icon-xiajiantou"></span>
      </p>
    </div>
    <!-- 只看西安 -->
    <div class="justxian">
      <div>只看西安</div>
      <div>周边城市</div>
      <div>免费景点</div>
      <div>营业中</div>
      <div>5A</div>
    </div>
    <!-- 大唐不夜城开始 -->
    <div class="content" v-for="(v, i) in arr" :key="i">
      <div class="left">
        <img :src="v.imgsrc" alt @click="fun()" />
      </div>
      <div class="right">
        <p class="title">{{ v.h5 }}</p>
        <p class="mass">
          <img class="start" src="mayingshuang/imgs/star.jpg" alt />
          <img class="start" src="mayingshuang/imgs/star.jpg" alt />
          <img class="start" src="mayingshuang/imgs/star.jpg" alt />
          <img class="start" src="mayingshuang/imgs/star.jpg" alt />
          <img class="start" src="mayingshuang/imgs/star.jpg" alt />
          <span class="orgren">4.9</span>
          <span>1.6</span>万条
        </p>
        <p>
          <span>{{ v.p }}</span>
          <span>{{ v.p2 }}</span>
          <span class="num">7.8</span>km
        </p>
        <p class="pjad">
          <img class="pj" src="mayingshuang/imgs/dianping.jpg" alt />
          <span class="adress">入选2021年必玩榜</span>
          <span class="zjy">自驾游</span>
          <span class="xhc">小火车</span>
        </p>
        <p>
          “唐风集结，流光溢彩，重返盛...”
          <span class="mfyw">免费游玩</span>
        </p>
      </div>
    </div>
    <!-- 接口 -->
    <div class="content" v-for="(v, is) in arr1" :key="is + 'i'">
      <div class="left">
        <img :src="v.storeImg" alt />
      </div>
      <div class="right">
        <p class="title">{{ v.storeName }}</p>
        <p class="mass">
          <img class="start" src="mayingshuang/imgs/star.jpg" alt />
          <img class="start" src="mayingshuang/imgs/star.jpg" alt />
          <img class="start" src="mayingshuang/imgs/star.jpg" alt />
          <img class="start" src="mayingshuang/imgs/star.jpg" alt />
          <img class="start" src="mayingshuang/imgs/star.jpg" alt />
          <span class="orgren">4.9</span>
          <span>1.6</span>万条
        </p>
        <p>
          <span>{{ v.p }}</span>
          <span>{{ v.storeArea }}</span>
          <span class="num">7.8</span>km
        </p>
        <p class="pjad">
          <img class="pj" src="mayingshuang/imgs/dianping.jpg" alt />
          <span class="adress">入选2021年必玩榜</span>
          <span class="zjy">自驾游</span>
          <span class="xhc">小火车</span>
        </p>
        <p>
          “唐风集结，流光溢彩，重返盛...”
          <span class="mfyw">免费游玩</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { Sdata } from "@/api/mayingshaung.js";
export default {
  data() {
    return {
      arr: [],
      arr1: []
    };
  },
  mounted() {
    axios.request("http://localhost:8889/manavlist").then(ok => {
      console.log(ok);
      this.arr = ok.data;
    });
    Sdata({ tpid: 6 }).then(ok => {
      console.log(ok.data.data);
      this.arr1 = ok.data.data;
    });
  },
  methods: {
    fun() {
      this.$router.push("/admissionticket");
    }
  }
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.position {
  width: 100%;
  height: 4.533vw;
  display: flex;
  justify-content: space-around;
  // background-color: black;
  margin-top: 5.067vw;
  p {
    width: 22.933vw;
    height: 4.533vw;
    font-size: 3.467vw;
  }
}

.justxian {
  margin-top: 3.2vw;
  width: 100%;
  height: 8vw;
  display: flex;
  justify-content: space-around;
  text-align: center;
  line-height: 8vw;
  margin-top: 2.667vw;
  // background-color: red;
  div {
    background-color: #f6f6f6;
    border-radius: 3.467vw;
    font-size: 0.8vw;
  }
}
.content {
  width: 95%;
  margin: auto;
  // background: green;
  display: flex;
  font-size: 2.667vw;
  padding-bottom: 2.667vw;
  .left {
    img {
      width: 21.333vw;
      height: 17.867vw;
    }
  }
  .right {
    width: 100%;
    margin-left: 2.667vw;
    text-align: left;
    line-height: 6.4vw;
    border-bottom: 0.267vw solid #f4f4f4;
    .num {
      margin-left: 39.2vw;
    }
    .mfyw {
      margin-left: 8vw;
    }
    .orgren {
      color: #ef663e;
    }
    .title {
      font-weight: bold;
    }
    .mass {
      .start {
        width: 2.667vw;
      }
    }
    .pjad {
      display: flex;
      .pj {
        width: 15.467vw;
        height: 4.8vw;
      }
      .adress {
        height: 4.2vw;
        background: #fcede2;
        color: #a48470;
        padding: 0.533vw 1.333vw 0 1.333vw;
        line-height: 4.133vw;
      }
      .zjy {
        height: 4.8vw;
        margin-left: 1.6vw;
        background-color: #f5f5f5;
        line-height: 4.8vw;
      }
      .xhc {
        height: 4.8vw;
        line-height: 4.8vw;
        margin-left: 2.133vw;
        background-color: #f5f5f5;
      }
    }
  }
}
</style>